import React, { useState, useEffect } from 'react';
import { 
  Card, 
  Typography, 
  Tabs, 
  List, 
  Tag, 
  Button, 
  Spin, 
  Empty,
  Space,
  Divider,
  Tooltip,
  Alert
} from 'antd';
import { 
  BookOutlined, 
  ReadOutlined, 
  LinkOutlined, 
  InfoCircleOutlined,
  WarningOutlined,
  VideoCameraOutlined
} from '@ant-design/icons';
import { ShieldOutlined } from '../icons/IconComponents';
import axios from 'axios';

const { Title, Paragraph, Text, Link } = Typography;
const { TabPane } = Tabs;

/**
 * PUA教育资源组件
 * 展示防范PUA的教育资源和知识
 */
const PUAEducation = () => {
  const [resources, setResources] = useState([]);
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('all');

  // 获取资源类型图标
  const getResourceTypeIcon = (type) => {
    switch(type.toLowerCase()) {
      case 'article':
        return <ReadOutlined />;
      case 'video':
        return <VideoCameraOutlined />;
      case 'guide':
        return <BookOutlined />;
      case 'counseling':
        return <ShieldOutlined />;
      default:
        return <LinkOutlined />;
    }
  };

  // 获取资源类型标签颜色
  const getResourceTypeColor = (type) => {
    switch(type.toLowerCase()) {
      case 'article':
        return 'blue';
      case 'video':
        return 'red';
      case 'guide':
        return 'green';
      case 'counseling':
        return 'purple';
      default:
        return 'default';
    }
  };

  // 获取教育资源
  const fetchEducationalResources = async () => {
    setLoading(true);
    try {
      // 这里应该替换为实际的API URL
      const response = await axios.get('/api/pua/educational-resources');
      setResources(response.data || []);
    } catch (error) {
      console.error('Failed to fetch educational resources:', error);
      // 使用示例数据
      setResources(sampleResources);
    } finally {
      setLoading(false);
    }
  };

  // 获取PUA分类
  const fetchPUACategories = async () => {
    try {
      // 这里应该替换为实际的API URL
      const response = await axios.get('/api/pua/categories');
      setCategories(response.data || []);
    } catch (error) {
      console.error('Failed to fetch PUA categories:', error);
      // 使用示例数据
      setCategories(sampleCategories);
    }
  };

  // 根据标签筛选资源
  const filterResourcesByTag = (tag) => {
    return tag === 'all' 
      ? resources 
      : resources.filter(resource => 
          resource.tags && resource.tags.includes(tag)
        );
  };

  useEffect(() => {
    fetchEducationalResources();
    fetchPUACategories();
  }, []);

  // 示例数据
  const sampleResources = [
    {
      id: 1,
      title: "识别并避免PUA技巧的全面指南",
      description: "这份指南详细介绍了常见的PUA技术，以及如何识别和应对这些操纵策略。",
      url: "https://example.com/pua-guide",
      type: "guide",
      tags: ["gaslighting", "love bombing", "negging"]
    },
    {
      id: 2,
      title: "PUA与情感操控：保护自己的心理健康",
      description: "了解PUA如何影响你的心理健康，以及如何建立健康的心理边界。",
      url: "https://example.com/psychological-health",
      type: "article",
      tags: ["psychological health", "boundaries"]
    },
    {
      id: 3,
      title: "PUA行为的心理学解析",
      description: "深入探讨PUA背后的心理学原理，了解为什么这些技术会有效，以及它们如何被滥用。",
      url: "https://example.com/psychology-pua",
      type: "video",
      tags: ["psychology", "manipulation"]
    },
    {
      id: 4,
      title: "从PUA关系中恢复：寻求帮助指南",
      description: "如果你曾经经历过PUA关系，这个资源提供了寻求专业帮助和支持的信息。",
      url: "https://example.com/recovery-help",
      type: "counseling",
      tags: ["recovery", "support"]
    }
  ];

  const sampleCategories = [
    {
      id: "gaslighting",
      name: "精神操控（Gaslighting）",
      description: "使受害者质疑自己的记忆、感知和判断力的心理操控技术"
    },
    {
      id: "love bombing",
      name: "爱情轰炸（Love Bombing）",
      description: "通过过度的关注、赞美和承诺来快速建立感情依赖"
    },
    {
      id: "negging",
      name: "负面评价（Negging）",
      description: "通过轻微贬低或消极评价来削弱对方自尊，增加获取认可的需求"
    },
    {
      id: "isolation",
      name: "社交隔离（Isolation）",
      description: "逐渐将对方与朋友和家人隔离，增加对操控者的依赖"
    }
  ];

  return (
    <Card
      title={
        <Space>
          <BookOutlined />
          <span>PUA教育资源</span>
        </Space>
      }
      className="pua-education-card"
    >
      {loading ? (
        <div className="resources-loading">
          <Spin tip="加载教育资源中..." />
        </div>
      ) : (
        <>
          <Paragraph>
            以下资源可以帮助你了解更多关于PUA的知识，识别常见的操控手段，并学习如何保护自己免受PUA的影响。
          </Paragraph>
          
          <Divider />
          
          {/* PUA分类介绍 */}
          {categories.length > 0 && (
            <div className="pua-categories">
              <Title level={4}>常见PUA类型</Title>
              <List
                grid={{ gutter: 16, column: 2 }}
                dataSource={categories}
                renderItem={category => (
                  <List.Item>
                    <Card size="small" title={category.name}>
                      <Paragraph>{category.description}</Paragraph>
                    </Card>
                  </List.Item>
                )}
              />
              <Divider />
            </div>
          )}
          
          {/* 教育资源标签页 */}
          <Title level={4}>教育资源</Title>
          <Tabs 
            activeKey={activeTab}
            onChange={setActiveTab}
            className="resource-tabs"
          >
            <TabPane tab="全部" key="all" />
            <TabPane tab="文章" key="article" />
            <TabPane tab="视频" key="video" />
            <TabPane tab="指南" key="guide" />
            <TabPane tab="咨询" key="counseling" />
          </Tabs>
          
          {/* 资源列表 */}
          <List
            className="resources-list"
            itemLayout="vertical"
            dataSource={activeTab === 'all' 
              ? resources 
              : resources.filter(r => r.type.toLowerCase() === activeTab)
            }
            locale={{
              emptyText: <Empty description="暂无相关资源" />
            }}
            renderItem={resource => (
              <List.Item
                key={resource.id}
                extra={
                  <Tag 
                    color={getResourceTypeColor(resource.type)}
                    icon={getResourceTypeIcon(resource.type)}
                  >
                    {resource.type}
                  </Tag>
                }
              >
                <List.Item.Meta
                  title={
                    <Link href={resource.url} target="_blank">
                      {resource.title} <LinkOutlined />
                    </Link>
                  }
                  description={resource.description}
                />
                {resource.tags && resource.tags.length > 0 && (
                  <div className="resource-tags">
                    {resource.tags.map(tag => (
                      <Tag key={tag}>{tag}</Tag>
                    ))}
                  </div>
                )}
              </List.Item>
            )}
          />
        </>
      )}
    </Card>
  );
};

export default PUAEducation; 